<html>

<head>
	<meta charset="utf-8">
	<style>
		.classification {
			position: relative;
			min-height: 400px;
			height: 100%;
		}

		.classification-main {
			margin-left: 15%;
		}

		.classification-side {
			width: 15%;
			position: absolute;
			left: 0;
			top: 102px;
			bottom: 0;
			border-right: 1px solid #ddd;
			overflow-y: scroll;
		}

		.classification-side-item {
			border-bottom: 1px solid #ddd;
		}

		.classification-title {
			font-size: 12px;
			font-weight: bolder;
			padding: 8px;
			background-color: #f5f5f5;
		}

		.classification-item {
			padding: 12px 8px;
			font-size: 12px;
			border-top: 1px dotted #ddd;
			border-bottom: 1px dotted #ddd;
			margin-bottom: -1px;
		}

		.classification-item.open {
			border-bottom: 1px solid #ddd;
			border-top: 1px solid #ddd;
		}

		.classification-item.open .classification-item-inner {
			height: auto;
		}

		.classification-item-inner {
			height: 30px;
			overflow: hidden;
		}

		.classification-item:hover {
			background-color: #fcfcfc;
		}

		.classification-item-header {
			cursor: pointer;
		}

		.classification-item-header h3 {
			margin: 0;
			font-size: 14px;
			font-weight: normal;
		}

		.classification-item-line {
			background: #e5e5e5;
			margin-top: 5px;
			height: 5px;
		}

		.classification-item-expanded {}

		.classification-item-expanded ul {
			padding: 0;
			margin: 0;
		}

		.classification-item-expanded li {
			list-style: none;
			color: #666;
			font-size: inherit;
		}

		.classification-item-group {
			display: table;
			table-layout: fixed;
			width: 100%;
			margin-top: 10px;
		}

		.classification-item-group-cell {
			display: table-cell;
		}

		.classification-backlog-header {
			padding: 8px;
			border-bottom: 1px solid #ddd;
			display: flex;
			font-size: 12px;
		}

		.classification-backlog-name {
			font-weight: bolder;
		}

		.classification-backlog-issue-count {
			padding: 0 0 0 12px;
			color: #999;
		}

		.classification-backlog-inner {
			padding: 8px;
		}

		.classification-backlog-item {
			font-size: 14px;
			border: 1px solid #ddd;
			padding: 6px;
			border-left: 4px solid #ddd;
			cursor: move;
			margin: 0 0 -1px 0;
			background-color: #fff;
		}

		.classification-backlog-item:hover {
			border-left-color: #009900;
			background-color: #f5f5f5;
		}

		.classification-out-line {
			border: 2px dashed #999 !important;
		}

		.classification-none {
			display: none;
		}

		.classification-inner {
			padding: 10px;
		}

		.classification-inner .classification-backlog-item {
			display: none;
		}

		.chosen-item {
			border: 2px solid #ec0044;
		}

		/*.classification-item .sortable-chosen{
				display: none;
			}*/
	</style>
</head>

<body>
	<div class="classification">
		<div class="classification-side">
			<div class="classification-side-item">
				<div class="classification-title">VERSIONS</div>
			</div>
			<div class="classification-side-item">
				<div class="classification-title">VERSIONS</div>
				<div class="classification-inner" id="classification-inner">
					<div class="classification-item" data-id="1">
						<div class="classification-item-inner">
							<div class="classification-item-header">
								<h3>1.0.1</h3>
								<div class="classification-item-line"></div>
							</div>
							<div class="classification-item-expanded">
								<ul>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Start Date</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Release Date</div>
										<div>none</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">问题</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Completed</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Unestimated</div>
										<div>2/二月/18</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="classification-item" data-id="2">
						<div class="classification-item-inner">
							<div class="classification-item-header">
								<h3>1.0.2</h3>
								<div class="classification-item-line"></div>
							</div>
							<div class="classification-item-expanded">
								<ul>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Start Date</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Release Date</div>
										<div>none</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">问题</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Completed</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Unestimated</div>
										<div>2/二月/18</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="classification-item" data-id="3">
						<div class="classification-item-inner">
							<div class="classification-item-header">
								<h3>1.0.1</h3>
								<div class="classification-item-line"></div>
							</div>
							<div class="classification-item-expanded">
								<ul>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Start Date</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Release Date</div>
										<div>none</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">问题</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Completed</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Unestimated</div>
										<div>2/二月/18</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="classification-side-item">
				<div class="classification-title">VERSIONS</div>
				<div class="classification-inner" id="classification-inner">
					<div class="classification-item" data-id="1">
						<div class="classification-item-inner">
							<div class="classification-item-header">
								<h3>1.0.1</h3>
								<div class="classification-item-line"></div>
							</div>
							<div class="classification-item-expanded">
								<ul>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Start Date</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Release Date</div>
										<div>none</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">问题</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Completed</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Unestimated</div>
										<div>2/二月/18</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="classification-item" data-id="2">
						<div class="classification-item-inner">
							<div class="classification-item-header">
								<h3>1.0.2</h3>
								<div class="classification-item-line"></div>
							</div>
							<div class="classification-item-expanded">
								<ul>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Start Date</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Release Date</div>
										<div>none</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">问题</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Completed</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Unestimated</div>
										<div>2/二月/18</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="classification-item" data-id="3">
						<div class="classification-item-inner">
							<div class="classification-item-header">
								<h3>1.0.1</h3>
								<div class="classification-item-line"></div>
							</div>
							<div class="classification-item-expanded">
								<ul>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Start Date</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Release Date</div>
										<div>none</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">问题</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Completed</div>
										<div>2/二月/18</div>
									</li>
									<li class="classification-item-group">
										<div class="classification-item-group-cell">Unestimated</div>
										<div>2/二月/18</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="classification-main">
			<div class="classification-backlog">
				<div class="classification-backlog-header">
					<div class="classification-backlog-name">WE5 Sprint 2.2</div>
					<div class="classification-backlog-issue-count">48 issues</div>
				</div>
				<div class="classification-backlog-inner">
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
				</div>
			</div>
			<div class="classification-backlog">
				<div class="classification-backlog-header">
					<div class="classification-backlog-name">WE5 Sprint 2.2</div>
					<div class="classification-backlog-issue-count">48 issues</div>
				</div>
				<div class="classification-backlog-inner">
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
				</div>
			</div>
			<div class="classification-backlog">
				<div class="classification-backlog-header">
					<div class="classification-backlog-name">WE5 Sprint 2.2</div>
					<div class="classification-backlog-issue-count">48 issues</div>
				</div>
				<div class="classification-backlog-inner">
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
					<div class="js-sortable classification-backlog-item">
						<a href="#">BTOB-2245</a>
						<span>金价配置-自动调价</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="../lib/sortable/sortable.js"></script>
	<script type="text/javascript">
		$(function () {
			var cSide = $('.classification-side');
			$(document).on('scroll', function () {
				if ($('body').scrollTop() > 102) {
					cSide.css({
						top: 0
					})
				} else {
					cSide.css({
						top: 102
					})
				}
			})

			var id = ''

			$(".classification-side").on('click', '.classification-item-header', function () {
				console.log($(this).parent('.classification-item'))
				if ($(this).parents('.classification-item').hasClass('open')) {
					$(this).parents('.classification-item').removeClass('open');
				} else {
					$(this).parents('.classification-item').addClass('open');
				}
			})

			$(".classification-item, .classification-title")
				.on('dragenter', function (event) {
					event.preventDefault();
					$(this).addClass("classification-out-line");
					console.log('enter')
				})
				.on('dragover', function (event) {
					event.preventDefault();
					$(this).addClass("classification-out-line");
				})
				.on('drop', function (event) {
					event.preventDefault();
					id = $(this).data('id');
					$(this).removeClass("classification-out-line");
					console.log('drop')
				})
				.on('dragleave', function (event) {
					event.preventDefault();
					console.log('dragleave')
					$(this).removeClass("classification-out-line");
				})
				.on('mouseleave', function (event) {
					$(this).removeClass("classification-out-line");
				})

			// var side = document.getElementById("classification-inner");
			// var sort = Sortable.create(side, {
			// 	sort: false,
			// 	group: {
			// 		name: 'item',
			// 		put: false
			// 	},
			// 	animation: 150,
			// 	filter: '.classification-item',
			// 	onAdd: function (evt){
			// 		var item = evt.item;
			// 		console.log('add')
			// 	},
			// 	onFilter: function(evt){
			// 		console.log('filter')
			// 	}
			// })

			// var container = document.getElementById("classification-inner");
			// var sort = Sortable.create(container, {
			// 	sort: false,
			// 	group: 'item',
			// 	animation: 150,
			// 	onUpdate: function (evt){
			// 		var item = evt.item;
			// 	},
			// 	onAdd: function(evt){
			// 		console.log('add')
			// 	}
			// })

			// var putItems = document.getElementsByClassName('classification-item');
			// [].forEach.call(putItems, function (el){
			// 	Sortable.create(el, {
			// 		sort: false,
			// 		group: {
			// 			name: 'item',
			// 			pull: false
			// 		},
			// 		ghostClass : 'chosen-item',
			// 		animation: 150,
			// 		onAdd: function(evt){
			// 			console.log('add', evt)
			// 		}
			// 	})
			// })

			var items = document.getElementsByClassName('classification-backlog-inner');
			[].forEach.call(items, function (el) {
				Sortable.create(el, {
					group: 'item',
					animation: 150,
					ghostClass: 'classification-out-line',
					onEnd: function (evt) {
						console.log('end', evt.item)
						if (id) {
							// ajax
							// ret == '200'
							// $(evt.item).remove()
						}
					}
				})
			})
		})
	</script>
</body>

</html>